<template>
  <div class="echarts-map">
    <div id="map"></div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, onUnmounted } from "vue";
  import * as echarts from 'echarts';
  import jiangsu from '@/assets/json/320000.json';
  export interface CityObj {
    name: string;
    center: number[];
    value: number;
  }
  // 获取随机整数
  function getRandomInt(min: number, max: number): number {  
    min = Math.ceil(min);  
    max = Math.floor(max);  
    return Math.floor(Math.random() * (max - min + 1)) + min;  
  };
  // 获取城市数据
  let cityName:CityObj[] = jiangsu["features"].map(item => {
    const { name, center } = item.properties;
    return {
      name,
      center,
      value: getRandomInt(1, 100)
    }
  });
  // 设立图表dom
  let chartObj: any = null;
  let mapDom: HTMLElement | null = null;
  let timer: number | undefined = undefined;
  // 数据项目
  let initNum: number = 0;
  // 渲染图表
  const renderChart = () => {
    mapDom = document.getElementById("map");
    // 在echarts初始化之前注册地图
    echarts.registerMap('jiangsu', { geoJSON: jiangsu });
    chartObj = echarts.init(mapDom);
    chartObj.setOption({
      geo: {
        show: true,
        map: 'jiangsu',
        roam: false, // 开启鼠标滚轮缩放 ( 如果设置为false, 那么类似鹰眼图的图例也会隐藏 )
        zoom: 1, // 地图缩放层级
        scaleLimit: {
          min: 1,
          max: 6
        },
        center: [118.96, 33.07],
        emphasis: {
          focus: 'none' // 高亮当前鼠标悬浮的区域
        },
        overview: {
          show: false
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: '#d900ff69',
          shadowOffsetX: -5,
          shadowOffsetY: 10
        }
      },
      // 根据series中第一个对象的data种的value大小来自动给地地理区域添加颜色
      visualMap: {
        // 阈值图例隐藏, 不然会卡
        show: false,
        // 按照值大小，在数组中的两个元素颜色范围内进行染色
        inRange: {
          color: ['#a800ffbd','#ff003596']
        }
      },
      series: [
        {
          type: 'map',
          zoom: 1,
          roam: false,
          center: [118.96, 33.07],
          map: 'jiangsu',
          label: {
            show: true,
            color: '#ffffff',
            fontSize: 16
          },
          itemStyle: {
            areaColor: '#a800ffbd',
            borderColor: '#ffffff'
          },
          data: cityName
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo', // geo地理坐标系，data中的每个项的value要为经纬度
          data: [{
            value: cityName[initNum].center,
            name: cityName[initNum].name,
            label: {
              show: true,
              position: 'top',
              color: '#ffffff',
              borderRadius: 6,
              backgroundColor: '#409effc2',
              padding: [16, 3, 16, 3],
              formatter: function(param: any) {
                console.log(param);
                return `{a|${param.name}}\n{b|${param.name}人口为:${cityName[0].value}万}`;
              },
              rich: {
                a: {
                  color: '#ffffff',
                  lineHeight: 12,
                  padding: [0, 10, 10, 10]
                },
                b: {
                  color: '#ffffff',
                  lineHeight: 12,
                  padding: [20, 10, 10, 10]
                }
              }
            },
            itemStyle: {
              color: '#409effc2'
            }
          }]
        }
      ]
    });
  }

  // 文档挂载之后进行渲染
  onMounted(() => {
    renderChart();
    timer = setInterval(() => { 
      initNum = getRandomInt(0, (cityName.length - 1));
      const options = chartObj.getOption();
      options.series[1].data = [{
        value: cityName[initNum].center,
        name: cityName[initNum].name,
        label: {
          show: true,
          position: 'top',
          color: '#ffffff',
          borderRadius: 6,
          backgroundColor: '#409effc2',
          padding: [16, 3, 16, 3],
          formatter: function(param: any) {
            return `{a|${param.name}}\n{b|${param.name}人口为:${cityName[initNum].value}万}`
          },
          rich: {
            a: {
              color: '#ffffff',
              lineHeight: 12,
              padding: [0, 10, 10, 10]
            },
            b: {
              color: '#ffffff',
              lineHeight: 12,
              padding: [20, 10, 10, 10]
            }
          }
        },
        itemStyle: {
          color: '#409effc2'
        }
      }];
      chartObj.setOption(options, true);
    }, 3000);
  }); 

  // 退出的时候卸载
  onUnmounted(() => {
    clearInterval(timer);
  })
</script>

<style lang="less" scoped>
  .echarts-map {
    box-sizing: border-box;
    padding-top: 50px;
    #map {
      width: 900px;
      height: 900px;
      margin: 0 auto;
    }
  }
</style>